<template>
  <div style="margin-top: 60px;margin-left:80px;border: 0px solid red;" >
    <!-- 搜索表单 -->
    <el-form style="margin-left: -40px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div style="border: 0px solid red; width: 400px; height: 60px; position: relative; top: -64px; left: 270px">
        <el-form-item label="搜索方式：" prop="key">
          <!-- 搜索条件下拉框 -->
          <el-select v-model="ruleForm.key" style="width: 160px; float: left" placeholder="请选择条件">
            <el-option label="姓名" value="name"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div style="border: 0px solid red; width: 400px; height: 60px; position: relative; top: -64px; left: 270px">
        <el-form-item label="输入：">
          <!-- 关键字输入框和搜索按钮 -->
          <el-input v-model="ruleForm.value" placeholder="请输入关键字" style="width: 160px;"></el-input>
          <el-button type="success" style="position: relative; left: 10px;" @click="submitForm('ruleForm')" >搜索</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%; position: relative; top: -30px">
      <el-table-column fixed prop="id" label="ID" width="80" align="center"></el-table-column>

      <el-table-column prop="parentId" label="父节点id" width="80" align="center"></el-table-column>

      <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>

      <el-table-column prop="sex" label="性别" width="100" align="center"></el-table-column>
      <el-table-column prop="brithday" label="出生日期" width="120" align="center"></el-table-column>
      <el-table-column prop="deadday" label="死亡日期" width="120" align="center"></el-table-column>
      <el-table-column prop="updatetime" label="更新时间" width="120" align="center"></el-table-column>
      <el-table-column prop="userid" label="更新者ID" width="100" align="center"></el-table-column>

      <el-table-column  label="图片" prop="ImageUrl" align="center" width="100px">
        <template v-slot="scope">
          <!-- 图片展示 -->
          <el-image style="width: 50px; height: 50px; margin-bottom: -4px" :src="`${scope.row.image}`"></el-image>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <!-- 操作按钮 -->
          <el-button size="small" type="success" @click="info(scope.row)">个人履历</el-button>
          <el-button size="small" type="warning" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination style="margin-top: 20px;float: left"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   @current-page="currentPage"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 10,
      total: null,
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 10
      },
      rules: {
        key: [
          { required: true, message: '请选择字段', trigger: 'change' }
        ]
      },
      isDeleted: false
    }
  },
  methods:{
    // 提交搜索表单
    submitForm(formName) {
      const _this = this
      // 将currentPage的值重置，使得每次进行search以后都从第一页开始
      _this.currentPage = 1
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          _this.ruleForm.page = _this.currentPage
          // 发送搜索请求
          this.$http.get('http://localhost:8081/people/search',{params:_this.ruleForm}).then(function (resp) {
            _this.tableData = resp.data.data.data
            _this.total = resp.data.data.total
          })
        }
      });
    },
    // 分页切换
    page(currentPage){
      const _this = this
      // 判断是否处于查询状态，即：关键字内是否有值，若有值则展示与值对应的信息，若没有则展示全部信息，若不添加这个判断，则第二页的内容是list中的内容而不是search的内容
      if(_this.ruleForm.value == ''){
        this.$http.get('http://localhost:8081/people/list/'+currentPage+'/'+_this.pageSize).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      } else {
        _this.ruleForm.page = _this.currentPage
        this.$http.get('http://localhost:8081/people/search',{params:_this.ruleForm}).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      }
    },
    // 编辑操作
    edit(row){
      this.$router.push('/PeopleUpdate?id='+row.id)
    },
    // 查看个人履历
    info(row){
      this.$router.push('/EventManager?id='+row.id)
    },
    // 删除操作
    del(row) {
      const _this = this
      this.$confirm('确认删除【'+row.name+'】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('http://localhost:8081/people/deleteById/'+row.id).then(function (resp) {
          if(resp.data.code==0){
            _this.$alert('【' + row.name + '】已删除', '', {
              confirmButtonText: '确定',
              callback: () => {
                location.reload()
              }
            });
          }
        });
      });
    },

  },
  created() {
    const _this = this
    // 初始化加载数据
    this.$http.get('http://localhost:8081/people/list/1/'+_this.pageSize).then(function (resp) {
      _this.tableData = resp.data.data.data
      _this.total = resp.data.data.total
    })
  }
}
</script>